<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首都医科大学附属小学</title>
		<meta name="description" content="首都医科大学附属小学（原右安门第一小学），学校地处南二环，西邻丽泽商务区，东临北京南站，位于开阳里社区中心。" />
		<meta name="keywords" content="右安门一小 右安门 首都医科大学附属小学 北京 一小  右安门 和文化 教育" /><meta name="author" content="say"/>
		<link rel="shortcut icon" href="../static/images/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="../static/font/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/student.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/theme-green.css"/>
		<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js" ></script>
		<script type="text/javascript" src="../static/js/main.js" ></script>
		<script src="../static/plugins/layer/layer.js"></script>
		<style>
			.yourclass .layui-layer-content {
			    padding: 20px;
			}
			.layui-layer-page .layui-layer-content {
			    overflow: auto;
			    position: relative;
			}
			 .yourclass {
			    background-color: #81ba25;
			    box-shadow: none;
			    color: #fff;
			    height: 240px;
			    width: 420px;
			}
		</style>
	</head>
	<body>
		<div class="header-top-fixed">
			<div class="w1080">
				<ul class="top-navbar">
					<li><a href="#">门户网站</a></li>
					<li><a href="#">德育信息</a></li>
					<li><a href="#">七彩少年</a></li>
					<li><a href="#">和雅教师</a></li>
					<li><a href="#">微课学习</a></li>
					<li><a href="#">微探交流</a></li>
				</ul>
				<ul class="navbar-right">
					<li><a href="#">返回首页</a></li>
					<li><a href="#">退出</a></li>
				</ul>
			</div>
		</div>
		<div class="header">
			<div class="user-div">
				<img src="../static/images/users.jpg"/>
			</div>
			<div class="header-con">
				<h2>首医附小学生空间</h2>
				<div class=" user-msg">
					<a href="#">
						<span id="">
							李彩优
						</span>
					</a>
					<div class="fenshu">
						<a href="#" class="jifen">
							<i></i>
							积分
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
						</a>
						<a href="#" class="xunz">
							<i></i>
							勋章 
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
							<span id=""></span>
						</a>
					</div>
					<div class="clear"></div>
					<div class="header-navbar">
						<ul>
							<li><a href="#">个人中心</a></li>
							<li><a href="#">个人空间</a></li>
							<li class="active"><a href="#">德育信息</a></li>
							<li><a href="#">微课学习</a></li>
							<li><a href="#">微探交流</a></li>
							<li><a href="#">艺术与鉴赏</a></li>
							<li><a href="#">社团活动</a></li>
							<li><a href="#">更多</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="point-div stu-d">
				<ul>
					<li>
						<a href="#">
							<i class="fa fa-lg fa-bell"></i>
							<span id="">
								11
							</span>
						</a>
						<span id="">
							消息
						</span>
					</li>
					<li>
						<a href="#">
							<i class="fa fa-lg fa-commenting"></i>
							<span id="">
								23
							</span>
						</a>
						<span id="">
							评论
						</span>
					</li>
					<li>
						<a href="#">
							<i class="fa fa-lg fa-heart"></i>
						</a>
						<span id="">
							收藏
						</span>
					</li>
					<a href="#" class="exit" ><i class="fa fa-lg fa-power-off"></i>  退出</a>
				</ul>
			</div>
		</div>
		<div class="containter">
			<div class="sider">
				<div class="con-div sider-div">
					<div class="sider-top">
						德育信息
					</div>
					<div class="sider-con zhandian">
						<ul>
							<li><a href="#"><i class="icon icon-dangan "></i>查看德育细则</a></li>
							<li><a href="#"><i class="icon icon-dangan "></i>课上评价</a></li>
							<li><a href="#"><i class="icon icon-dangan "></i>课下评价</a></li>
							<li class="actived"><a href="#"><i class="icon icon-dangan "></i>我的评价记录</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="content content-lg">
				<div class="main-div con-div">
					<div class="main-top">
						<ul class="tab-btn">
							<li class="top-seclect"> <a href="#">Tab标签</a></li>
						</ul>
						<div class="topl">
							<form action="" method="post" style="display: inline-block;">
								<button class="btn btn-normal">上传作品</button>
							</form><button class="btn btn-normal">取消</button>
						</div>
					</div>
					<div class="con-list">
						<div class="dynamic loglist">
							<h3 class="demo-title">信息框</h3>
							<button class="btn btn-frame" id="test1">实例1</button>
							<button class="btn btn-frame" id="test2">实例2</button>
							<button class="btn btn-frame" id="test3">实例3</button>
							<button class="btn btn-frame" id="test4">实例4</button>
							<button class="btn btn-frame" id="test5">实例5</button>
						</div>
						<div class="dynamic loglist">
							<h3 class="demo-title">页面层/iframe层</h3>
							<button class="btn btn-frame" id="test6">页面层-自定义</button>
							<button class="btn btn-frame" id="test7">页面层-图片</button>
							<button class="btn btn-frame" id="test8">父子操作</button>
							<button class="btn btn-frame" id="test9">多媒体</button>
							<button class="btn btn-frame" id="test10">禁滚动条</button>
						</div>
						<div class="dynamic loglist">
							<h3 class="demo-title">加载层</h3>
							<button class="btn btn-frame" id="test11">默认</button>
							<button class="btn btn-frame" id="test12">风格2</button>
							<button class="btn btn-frame" id="test13">风格3</button>
							<button class="btn btn-frame" id="test14">风格4</button>
							<button class="btn btn-frame" id="test15">风格5</button>
						</div>
						<div class="dynamic loglist">
							<h3 class="demo-title">tips层</h3>
							<button class="btn btn-frame" id="test16">上</button>
							<button class="btn btn-frame" id="test17">右</button>
							<button class="btn btn-frame" id="test18">下</button>
							<button class="btn btn-frame" id="test19">左</button>
							<button class="btn btn-frame" id="test20">允许多个</button>
						</div>
						<div class="dynamic loglist">
							<h3 class="demo-title">其他演示</h3>
							<button class="btn btn-frame" id="test21">默认prompt</button>
							<button class="btn btn-frame" id="test22">屏蔽浏览器动</button>
							<button class="btn btn-frame" id="test23">弹出即全屏</button>
							<button class="btn btn-frame" id="test24">正上方</button>
							<button class="btn btn-frame" id="test25">更多例子</button>
						</div>
					</div>
				</div>
				<div id="tong" class="hide">
					<img src="../static/images/tong.jpg">
				</div>
				<div class="clear"></div>
			</div>
		<div class="clear"></div>
		</div>
		<div class="footer"> 
			<p>© 2015-2016 DHHC 版权所有</p>
		  	<p>版权号</p>
		</div>
		<script>

		$('#test1').on('click', function(){
		  	//信息框-例1
			layer.alert('见到你真的很高兴', {icon: 6});
		});
		$("#test2").on('click',function(){
			//信息框-例2
			layer.msg('你确定你很帅么？', {
			  time: 0 //不自动关闭
			  ,btn: ['必须啊', '丑到爆']
			  ,yes: function(index){
			    layer.close(index);
			    layer.msg('雅蠛蝶 O.o', {
			      icon: 6
			      ,btn: ['嗷','嗷','嗷']
			    });
			  }
			});
		});
		$('#test3').on('click', function(){
		  	//信息框-例3
			layer.msg('这是最常用的吧');
		});
		
		$('#test4').on('click', function(){
		  	//信息框-例4
			layer.msg('不开心。。', {icon: 5});
		});
		$('#test5').on('click', function(){
		  	//信息框-例5
			layer.msg('玩命卖萌中', function(){
			//关闭后的操作
			});
		});
		$('#test6').on('click', function(){
		  	//页面层-自定义
			layer.open({
			  type: 1,
			  title: false,
			  closeBtn: 0,
			  shadeClose: true,
			  skin: 'yourclass',
			  content: '自定义HTML内容'
			});
		});
		$('#test7').on('click', function(){
		  	//页面层-图片
			layer.open({
			  type: 1,
			  title: false,
			  closeBtn: 0,
			  area: '516px',
			  skin: 'layui-layer-nobg', //没有背景色
			  shadeClose: true,
			  content: $('#tong')
			});
		});
		$('#test8').on('click', function(){
		  	//iframe层-父子操作
			layer.open({
			  type: 2,
			  area: ['700px', '530px'],
			  fixed: false, //不固定
			  maxmin: true,
			  content: 'buttons.html'
			});
		});
		$('#test9').on('click', function(){
		  	//iframe层-多媒体
			layer.open({
			  type: 2,
			  title: false,
			  area: ['630px', '360px'],
			  shade: 0.8,
			  closeBtn: 0,
			  shadeClose: true,
			  content: 'mi4.webm'
			});
			layer.msg('点击任意处关闭');
		});
		$('#test10').on('click', function(){
		  	//iframe层-禁滚动条
			layer.open({
			  type: 2,
			  area: ['360px', '500px'],
			  skin: 'layui-layer-rim', //加上边框
			  content: ['http://layer.layui.com/mobile', 'no']
			});
		});
		$('#test11').on('click', function(){
		  	//加载层-默认风格
			layer.load();
			//此处演示关闭
			setTimeout(function(){
			  layer.closeAll('loading');
			}, 2000);
		});
		$('#test12').on('click', function(){
		  	//加载层-风格2
			layer.load(1);
			//此处演示关闭
			setTimeout(function(){
			  layer.closeAll('loading');
			}, 2000);
		});
		$('#test13').on('click', function(){
		  	//加载层-风格3
			layer.load(2);
			//此处演示关闭
			setTimeout(function(){
			  layer.closeAll('loading');
			}, 2000);
		});
		$('#test14').on('click', function(){
		  	//加载层-风格4
			layer.msg('加载中', {
			  icon: 16
			  ,shade: 0.01
			});
		});
		$('#test15').on('click', function(){
		  	//打酱油
			layer.msg('尼玛，打个酱油', {icon: 4});
		});
		$('#test16').on('click', function(){
		  	//tips层-上
			layer.tips('上', '#id或者.class', {
			  tips: [1, '#0FA6D8'] //还可配置颜色
			});
		});
		$('#test17').on('click', function(){
		  	//tips层-右
			layer.tips('默认就是向右的', '#id或者.class');
		});
		$('#test18').on('click', function(){
		  	//tips层-下
			layer.tips('下', '#id或者.class', {
			  tips: 3
			});
		});
		$('#test19').on('click', function(){
		  	//tips层-左
			layer.tips('左边么么哒', '#id或者.class', {
			  tips: [4, '#78BA32']
			});
		});
		$('#test20').on('click', function(){
		  	//tips层-不销毁之前的
			layer.tips('不销毁之前的', '#id或者.class', {
			  tipsMore: true
			});
		});
		$('#test21').on('click', function(){
		  	//默认prompt
			layer.prompt(function(val, index){
			  layer.msg('得到了'+val);
			  layer.close(index);
			});
		});
		$('#test22').on('click', function(){
		  	//屏蔽浏览器滚动条
			layer.open({
			  content: '浏览器滚动条已锁',
			  scrollbar: false
			});
		});
		$('#test23').on('click', function(){
		  	//弹出即全屏
			var index = layer.open({
			  type: 2,
			  content: 'http://layim.layui.com',
			  area: ['320px', '195px'],
			  maxmin: true
			});
			layer.full(index);
		});
		$('#test24').on('click', function(){
		  	//正上方
			layer.msg('灵活运用offset', {
			  offset: 't',
			  anim: 6
			});
		});
		$('#test25').on('click', function(){
		  	//更多例子 
			layer.msg('Hi');
		});
		
		
		</script>
	</body>
</html>
